<template>
  <div class="delivery-track">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="任务编号">
          <el-input v-model="searchForm.taskNo" placeholder="请输入任务编号" clearable />
        </el-form-item>
        <el-form-item label="配送司机">
          <el-select v-model="searchForm.driverId" placeholder="请选择司机" clearable>
            <el-option
              v-for="item in driverOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="配送状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="配送日期">
          <el-date-picker
            v-model="searchForm.date"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>搜索
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 跟踪地图 -->
    <el-row :gutter="20" class="track-container">
      <!-- 左侧任务列表 -->
      <el-col :span="8">
        <el-card class="task-card">
          <template #header>
            <div class="card-header">
              <span>配送任务</span>
              <el-radio-group v-model="viewType" size="small">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="active">进行中</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          
          <el-scrollbar height="calc(100vh - 300px)">
            <div 
              v-for="task in taskList" 
              :key="task.id"
              class="task-item"
              :class="{ active: currentTask?.id === task.id }"
              @click="handleTaskSelect(task)"
            >
              <div class="task-header">
                <span class="task-no">{{ task.taskNo }}</span>
                <el-tag :type="getStatusType(task.status)" size="small">
                  {{ getStatusText(task.status) }}
                </el-tag>
              </div>
              <div class="task-info">
                <div class="driver-info">
                  <el-avatar :size="24" :src="task.driverAvatar" />
                  <span>{{ task.driverName }}</span>
                </div>
                <div class="task-stats">
                  <span>{{ task.orderCount }}单</span>
                  <el-divider direction="vertical" />
                  <span>{{ task.completedCount }}已送达</span>
                </div>
              </div>
              <div class="task-progress">
                <el-progress 
                  :percentage="(task.completedCount / task.orderCount) * 100"
                  :status="task.status === 'completed' ? 'success' : ''"
                  :stroke-width="4"
                  :show-text="false"
                />
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </el-col>

      <!-- 右侧地图和详情 -->
      <el-col :span="16">
        <el-card class="map-card">
          <template #header>
            <div class="card-header">
              <span>实时跟踪</span>
              <div class="header-actions" v-if="currentTask">
                <el-button-group>
                  <el-button :type="mapType === 'track' ? 'primary' : ''" @click="mapType = 'track'">
                    轨迹回放
                  </el-button>
                  <el-button :type="mapType === 'realtime' ? 'primary' : ''" @click="mapType = 'realtime'">
                    实时位置
                  </el-button>
                </el-button-group>
              </div>
            </div>
          </template>

          <div v-if="!currentTask" class="empty-map">
            <el-empty description="请选择配送任务" />
          </div>
          
          <template v-else>
            <div class="map-container">
              <!-- 这里集成地图组件 -->
              <div class="map-placeholder">地图区域</div>
              
              <!-- 轨迹回放控制器 -->
              <div v-if="mapType === 'track'" class="track-controller">
                <el-slider v-model="trackProgress" :max="100" :format-tooltip="formatTrackTime">
                  <template #marker>
                    <el-icon><Van /></el-icon>
                  </template>
                </el-slider>
                <div class="controller-actions">
                  <el-button-group>
                    <el-button :icon="VideoPlay" @click="handleTrackPlay" />
                    <el-button :icon="VideoPause" @click="handleTrackPause" />
                    <el-button :icon="RefreshRight" @click="handleTrackReset" />
                  </el-button-group>
                  <el-select v-model="trackSpeed" size="small" style="width: 100px">
                    <el-option label="1x" :value="1" />
                    <el-option label="2x" :value="2" />
                    <el-option label="4x" :value="4" />
                  </el-select>
                </div>
              </div>
            </div>

            <!-- 配送详情 -->
            <div class="delivery-info">
              <el-tabs v-model="activeTab">
                <el-tab-pane label="配送订单" name="orders">
                  <el-table :data="currentTask.orders" size="small" height="200">
                    <el-table-column prop="orderNo" label="订单编号" width="150" />
                    <el-table-column prop="address" label="配送地址" show-overflow-tooltip />
                    <el-table-column prop="status" label="状态" width="100">
                      <template #default="{ row }">
                        <el-tag :type="getOrderStatusType(row.status)">
                          {{ getOrderStatusText(row.status) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="estimatedTime" label="预计送达" width="150" />
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="配送记录" name="records">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(record, index) in currentTask.records"
                      :key="index"
                      :timestamp="record.time"
                      :type="record.type"
                    >
                      {{ record.content }}
                    </el-timeline-item>
                  </el-timeline>
                </el-tab-pane>
              </el-tabs>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { 
  Search, Refresh, Van, VideoPlay, 
  VideoPause, RefreshRight 
} from '@element-plus/icons-vue'

// 搜索表单
const searchForm = ref({
  taskNo: '',
  driverId: '',
  status: '',
  date: ''
})

// 视图控制
const viewType = ref('all')
const mapType = ref<'track' | 'realtime'>('realtime')
const activeTab = ref('orders')
const currentTask = ref<any>(null)

// 轨迹回放相关
const trackProgress = ref(0)
const trackSpeed = ref(1)
const isPlaying = ref(false)

// 选项数据
const driverOptions = [
  { value: '1', label: '张三' },
  { value: '2', label: '李四' },
  { value: '3', label: '王五' }
]

const statusOptions = [
  { value: 'pending', label: '待配送' },
  { value: 'delivering', label: '配送中' },
  { value: 'completed', label: '已完成' }
]

// 模拟数据
const taskList = ref([
  {
    id: '1',
    taskNo: 'PS20231128001',
    status: 'delivering',
    driverName: '张三',
    driverAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    orderCount: 5,
    completedCount: 2,
    orders: [
      {
        orderNo: 'DD20231128001',
        address: '北京市朝阳区xxx街道',
        status: 'completed',
        estimatedTime: '2023-11-28 11:30'
      },
      {
        orderNo: 'DD20231128002',
        address: '北京市朝阳区yyy街道',
        status: 'delivering',
        estimatedTime: '2023-11-28 12:00'
      }
    ],
    records: [
      {
        time: '2023-11-28 09:00:00',
        content: '开始配送',
        type: 'primary'
      },
      {
        time: '2023-11-28 10:00:00',
        content: '完成第一单配送',
        type: 'success'
      }
    ]
  }
])

// 方法
const getStatusType = (status: string) => {
  const map: Record<string, string> = {
    pending: 'warning',
    delivering: 'primary',
    completed: 'success'
  }
  return map[status] || 'info'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: '待配送',
    delivering: '配送中',
    completed: '已完成'
  }
  return map[status] || '未知状态'
}

const getOrderStatusType = (status: string) => {
  const map: Record<string, string> = {
    pending: 'warning',
    delivering: 'primary',
    completed: 'success'
  }
  return map[status] || 'info'
}

const getOrderStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: '待配送',
    delivering: '配送中',
    completed: '已送达'
  }
  return map[status] || '未知状态'
}

const handleSearch = () => {
  // 实现搜索逻辑
}

const resetSearch = () => {
  searchForm.value = {
    taskNo: '',
    driverId: '',
    status: '',
    date: ''
  }
}

const handleTaskSelect = (task: any) => {
  currentTask.value = task
  // 这里应该加载任务的轨迹数据
}

const formatTrackTime = (val: number) => {
  // 这里根据进度计算实际时间
  return '10:00:00'
}

const handleTrackPlay = () => {
  isPlaying.value = true
  // 实现轨迹回放逻辑
}

const handleTrackPause = () => {
  isPlaying.value = false
}

const handleTrackReset = () => {
  trackProgress.value = 0
  isPlaying.value = false
}
</script>

<style scoped lang="scss">
.delivery-track {
  .track-container {
    margin-top: 20px;
  }
  
  .task-card {
    height: calc(100vh - 180px);
    
    .task-item {
      padding: 16px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        background-color: #f5f7fa;
      }
      
      &.active {
        border-color: #409eff;
        background-color: #ecf5ff;
      }
      
      .task-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        
        .task-no {
          font-weight: bold;
        }
      }
      
      .task-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        
        .driver-info {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        .task-stats {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
  
  .map-card {
    height: calc(100vh - 180px);
    
    .empty-map {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .map-container {
      position: relative;
      height: calc(100% - 300px);
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      
      .map-placeholder {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #909399;
        background-color: #f5f7fa;
      }
      
      .track-controller {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 16px;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        
        .controller-actions {
          margin-top: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    
    .delivery-info {
      margin-top: 20px;
      height: 240px;
      
      :deep(.el-tabs__content) {
        height: calc(100% - 40px);
        overflow: auto;
      }
    }
  }
}

// 响应式处理
@media screen and (max-width: 768px) {
  .delivery-track {
    .search-form {
      .el-form-item {
        width: 100%;
      }
    }
  }
}
</style> 